<template>
	<view :class="params.rowClass">
		<view class="input-title mr-15 "  v-if="label && type != 'search'" >
			<view class="fr" v-if="type != 'button'"><span v-if="params.isMust == true" class="c-danger">*</span>{{label}}</view>
		</view>
		<view :class="label?'col-auto':''" >
			<!-- 输入框 -->
			<input v-if="type == 'input'" :class="params.formClass?params.formClass:'input-line'" v-model="name" :placeholder="placeholder?placeholder:label" :type="params.inputType?params.inputType:'text'" 
				@input="changeValue" />
			<!-- 下拉 -->
			<view v-else-if="type == 'select'" :class="params.formClass?params.formClass:''">
				<gt-drop-list   v-model="name" type="parent" @change="changeValue"
					:list="info[field]" :placeholder="placeholder?placeholder:label"></gt-drop-list>
			</view>
			<!-- 图片 -->
			<gt-upload-file v-else-if="type == 'file'" :class="params.formClass?params.formClass:''" v-model="name"  :limit="params.limit?params.limit:1" :size="params.size?params.size:'sm'" @change="changeValue"></gt-upload-file>
			<!-- 省市区 -->
			<view v-else-if="type == 'region'" :class="params.formClass?params.formClass:'input-line'">
				<gt-select-region   :province.sync="name.province" 
				:city.sync="name.city" :county.sync="name.county" placeholder="请选择 省/市/区"></gt-select-region>
			</view>
			<!-- 输入框查询 -->
			<view v-else-if="type == 'select_search'">
				<gt-drop-list :class="params.formClass?params.formClass:''" v-model="name"  @change="changeValue"
					:url="params.url" type="search" :placeholder="params.placeholder"></gt-drop-list>
			</view>
			<!-- 时间范围 -->
			<view v-else-if="type == 'time_range'">
				<uni-datetime-picker class="dateTime mb-15 mr-15" type="daterange" @change="getTime"
					rangeSeparator="至" :start-placeholder="placeholder+'开始时间'" :end-placeholder="placeholder+'结束时间'"/>
			</view>
			<!-- 范围 -->
			<view v-else-if="type == 'range'">
				<view class="input-line input-block mb-15 mr-15 row">
					<input class="col-auto input-range" type="number" :placeholder="placeholder" v-model="value[0]"/>
					<view class="input-range-title">至</view>
					<input class="col-auto input-range-right" type="number" v-model="value[1]" />
				</view>
			</view>
			<view v-else-if="type == 'custom'">
				<slot name='custom' :type="type" :field="field"></slot>
			</view>
			<!-- 提交按钮 -->
			<view v-else-if="type == 'button'" class="btn" @click="submit()" >{{label}}</view>
			<!-- 搜索按钮 -->
			<view v-else-if="type == 'search'" @click="submit()" >
				<gt-btn :name="label"  iconClass="icon-search mr-5 btn-nav-icon" class="btn" ></gt-btn>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "gt-form-item",
		model: {
			prop: 'value',
			event: 'change'
		},
		props: {
			value: {
				type: [Number,String,Object,Array],
				default: function() {
					return ''
				}
			},
			label:{
				type:String,
				default:function(){
					return '';
				}
			},
			field:{
				type:String,
				default:function(){
					return '';
				}
			},
			placeholder:{
				type:String,
				default:function(){
					return '';
				}
			},
			type:{
				type:String,
				default:function(){
					return 'input';
				}
			},
			params:{
				type:Object,
				default:function(){
					return {};
				}
			},
			info:{
				type:Object,
				default:function(){
					return {};
				}
			}
		},
		created(){},
		data() {
			return {
				name:this.value
			}
		},
		watch:{
			value(newVal,oldVal){
				this.name = newVal
			}
		},
		methods: {
			getTime(e){
				this.$emit("change",e);
			},
			changeValue(e){
				this.$emit("change",this.name);
			},
			submit(){
				this.$emit("callBack");
			}
		}
	}
</script>

<style>
	.dateTime >>> .uni-date__x-input{
		height: 36px;
		line-height: 36px;
	}
	.input-range{
		height:36px;
		line-height: 36px;
		color: inherit;
		font: inherit;
	}
	
</style>
